<template>
  <div class="layer" @contextmenu="triggerMenuCtx" menu="mockState">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank"
          rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank"
          rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank"
          rel="noopener">eslint</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank"
          rel="noopener">typescript</a></li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { initPlatform } from '@/plugins'
import { getSelectedText } from '@/utils'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted () {
    initPlatform((electron: ElectronAPI) => {
      electron.updateMenuOpts()
    })
    // console.log(window.electron)
  },
  methods: {
    triggerMenuCtx (e: Event) {
      e.stopPropagation()
      const selected = getSelectedText()
      console.log('selected', selected)
      initPlatform((electron: ElectronAPI) => {
        // electron.reCreateMenu('getSelection')
        electron.ipcRenderer.send('show-menu')
      })
    }
  }
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
